<template>
  <el-drawer
    :visible.sync="visible"
    :title="title"
    :modal-append-to-body="true"
    :append-to-body="true"
    :destroy-on-close="false"
    :modal="true"
    direction="rtl"
    :wrapperClosable="false"
    custom-class="form-drawer"
    size="450px"
    @closed="closed"
    >

    <div class="form-drawer__content">


      <el-form ref="formData" :model="formData" style="padding: 20px;" >

        <el-form-item :label-width="formLabelWidth" label="项目名称" prop="name">
          <el-input v-model="formData.name" placeholder="项目名称" autocomplete="off" disabled />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="项目封面" prop="imageUrl">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="预设分辨率" prop="resX">
          <el-input-number v-model="formData.resX" :min="200" :max="7680" label="宽度(px)" style="margin-right: 5px; width: 150px;" />
          <el-input-number v-model="formData.resY" :min="200" :max="7680" label="高度(px)" style="width: 150px;" />
        </el-form-item>

        <el-form-item :label-width="formLabelWidth" label="预览地址" prop="imageUrl">
          <el-input placeholder="预览地址" v-model="formData.url"  disabled >
            <el-button slot="append" @click="handleSubmit" >复制</el-button>
          </el-input>
        </el-form-item>
      </el-form>

      <div class="form-drawer__footer">
        <el-button @click="closed" :loading="loading">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="submitForm">预 览</el-button>
      </div>
    </div>
  </el-drawer>
</template>

<script>
  import { JSEncrypt } from 'jsencrypt'
  import {
    previewProject,
  } from '@/api/biz/project'

  import {
    isOk
  } from '@/utils/request'

  export default {
    name: 'PreviewDrawer',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{

    },
    watch:{
      properties: {
        handler: function(value) {
          this.visible = value.visible
          if (value.data) {
            this.formData.id = value.data.id || ''
            this.formData.sceneId = value.data.sceneId || ''
            this.formData.name = value.data.name || ''
            this.formData.resX = 1920
            this.formData.resY = 1080
            this.formData.url = ''
            this.imageUrl=process.env.VUE_APP_BASE_API+'/biz/scene/thumbnail/'+value.data.sceneId
          }
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        visible:false,
        title:'项目预览',
        loading:false,
        formData: {
          id: '',
          name: '',
          size:0.00,
          version:0.00,
          isForceres:'1',
          exeFilePath:'',
          remark: '',
          frameRate:24,
          sceneId:'',
          resX:1920,
          resY:1080,
          url:''
        },
        formLabelWidth:'90px',
        imageUrl: '',
        publicKey:'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDf5FIEff3M6Nn20NkwPlRd8FNFcYOiwHgWWE5AHtFftOSip/YaG9vDhF41Ry9nuqLjhkMB3NWVnIVl7xMvzEUxs5KGYovPLU4l8oRX6jfEjET6WhHqDUijPCgrRKEVncWHWrExN05ETL3MQgX00p04JMG/D4XNp4A1DwcuxLJwtQIDAQAB',
      }
    },
    created() {
      this.previewProject()
    },
    methods:{
      previewProject(){
        this.loading=true
        previewProject({
          projectId: this.formData.id,
        }).then(rsp => {
          if(isOk(rsp)){
            const _data = rsp.result
            this.formData.resX = _data.scene.resX || 1920
            this.formData.resY = _data.scene.resY || 1080
            this.formData.url = _data.url || ''
            this.loading = false
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      submitForm(){
        // console.log("======",this.formData)
        this.$store.commit('scene/setIframeShow',true)
        Object.assign(this.formData,{handler:'preview332530'})
        this.$store.commit('scene/setSceneInfo',this.formData)
      },
      handleSubmit() {
      	var copyContent = document.createElement('input');
        console.log("====",this.formData)
        let passWord = this.encryptedData("preview332530");
        copyContent.value = this.formData.url + '/index?appId='+this.formData.id+'&resX='+this.formData.resX+'&resY='+this.formData.resY+'&mode='+passWord
      	// copyContent.value = this.formData.url+'&width='+this.formData.resX+'&height='+this.formData.resY;
      	document.body.appendChild(copyContent);
      	copyContent.select(); // 选择对象
      	document.execCommand("Copy"); // 执行浏览器复制命令
      	this.$message.success("复制成功！");
      	copyContent.remove();
      },
      encryptedData(data) {
        // 新建JSEncrypt对象
        let encryptor = new JSEncrypt();
        // 设置公钥
        encryptor.setPublicKey(this.publicKey);
        // 加密数据
        return encryptor.encrypt(data);
      },
      closed: function() {
        this.$emit('closed', false)
      },
    }
  }

</script>


<style lang="scss" scoped>

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 10px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 240px  !important;
    height: 180px  !important;
    line-height: 180px !important;
    text-align: center;
    border-radius: 10px;
  }
  .avatar {
    width: 240px !important;
    height: 180px !important;
    display: block;
    border-radius: 10px;
  }

</style>
